<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04绘制文字</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid gold;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="500">
			<!--Canvas标签宽高默认值为 300*150-->
			当前浏览器版本过低 不支持 Canvas, 请升级!
			<!-- 
				IE 9+ 及其他浏览器都支持Canvas
				IE 9 以下, 可使用 Google 开发的 ExplorerCanvas 插件
			 -->
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取 canvas标签
		var firCan = document.getElementById("firCan");
		// 2, 获取 2D渲染上下文
		var context = firCan.getContext('2d');
		// 3, 绘制文字
		
		context.fillStyle = "red";
		/*
		 * font 设置字体样式
		 */
		context.font = "italic 40px KTKaiti";
		/*
		 * textAlign 设置文字在水平方向上的对齐方式
		 * 属性值:
		 * 	start(默认值), center, end
		 * 注意: 设置的是文字相对于 起始点 的对齐方式
		 */
		context.textAlign = "end";
		/*
		 * 绘制填充文字: fillText(text, x, y, maxWidth)
		 * 四个参数:
		 * 	text			要绘制的文字
		 * 	x, y			文字的绘制起始点
		 * 	maxWidth		文字的最大绘制宽度, 一般省略不写
		 * 默认字体大小 10px
		 */
		context.fillText("中午吃什么?", 100, 100);
		
		/*
		 * 绘制描边文字: strokeText()
		 * 参数同上
		 */
		context.strokeText("大盘鸡吧!", 300, 300);
		
	</script>
</html>
